<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- <div id="container" ref="div"></div> -->
        <!-- <ul>
            <li v-for="item in arr">{{item}}</li>
        </ul> -->
        <button @click="fun('child1')">显示组件一</button>
        <button @click="fun('child2')">显示组件二</button>
        <!-- <keep-alive> -->
            <component :is="componentId"></component>
        <!-- </keep-alive> -->
        
    </div>
    <script src="./js/vue.js"></script>
    <script>
        // 要加入p7理论题中
        // keep-alive的作用： 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们 当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
        // $nextTick的作用： 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
        const child1 = {
            template: `
                <div>这是组件一</div>
            `,
            activated() {
                console.log('组件一激活了')
            },

            deactivated() {
                console.log('组件一失活了')
            },

            beforeDestroy() {
                console.log('组件一销毁之前')
            },

            destroyed() {
                console.log('组件一销毁之后')
            },
        }
        const child2 = {
            template: `
                <div>这是组件二</div>
            `,
            activated() {
                console.log('组件二激活了')
            },

            deactivated() {
                console.log('组件二失活了')
            },
        }
        
        new Vue({
            el: '#app',
            components: {
                child1,
                child2
            },
            data: {
                msg: 'hello world',
                arr: [1, 2, 3],
                componentId: 'child1'
            },
            // 组件创建之前 组件实例已经存在 但是data和methods还未初始化
            beforeCreate() {
                // console.log(this.fun)
            },
            //实例创建完成 data和methods完成初始化 这时dom还未初始化
            created() {
                // console.log(this.msg) 
                // var el = document.getElementById('container')
                // console.log(el)
                // console.log(this.$refs.div)
            },
            // 渲染之前
            beforeMount() {
                console.log(this.$refs.div)
            },
            // 组件实例渲染完成之后 这时候真是dom已经生成
            mounted() {
                console.log(this.$refs.div)
            },
            // vue函数的集合
            methods: {
                fun(id) {
                    // this.arr[0] = 4
                    // this.arr.push(4)
                    this.componentId = id
                }
            },
            // 数据变化导致的dom打补丁或者更新之前触发的声明周期
            beforeUpdate() {
                // console.log(1)
            },
            // 数据变化导致的dom打补丁或者更新之后触发的声明周期
            updated() {
                // console.log(2)
            },
            // 组件被激活时触发的声明周期
            activated() {
                
            },
            // 组件失活时触发的声明周期
            deactivated() {
                
            },
            beforeDestroy() {
                
            },
            destroyed() {
                
            },
            errorCaptured()  {
                
            },
        })

    </script>
</body>
</html>